@charset 'utf-8';

/* VARIABLES
// ------------------------- */
$aisdemo-primary-color: #FF585B;
$aisdemo-text-color: #565A5C;
$aisdemo-text-lighter-color: #949697;
$aisdemo-color-white: #FFFFFF;
$aisdemo-color-gray-light: #DCE0E0;
$aisdemo-color-gray-lighter: #EDEFED;

/* GENERAL
// ------------------------- */
body {
  font-family: Roboto;
  font-size: 16px;
  color: $aisdemo-text-color;
}

.aisdemo--left-column {
  height: 400px;
}

.aisdemo--right-column {
  padding-right: 0;
  padding-left: 0;
}

/* HEADER
// ------------------------- */
.aisdemo-navbar {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid $aisdemo-color-gray-light;
  position: relative;

  .is-logo {
    display: inline-block;
    position: relative;
    top: -8px;
    left: 16px;
  }

  .logo {
    display: inline-block;
    padding: 14px 22px;
    font-size: 40px;
    line-height: 1;
    font-family: Courier;
    color: $aisdemo-primary-color;
    border-right: 1px solid $aisdemo-color-gray-light;
  }

  .fa-search {
    font-size: 30px;
    position: absolute;
    top: 17px;
    left: 140px;
    color: $aisdemo-color-gray-light;
  }

  .ais-search-box {
    position: absolute;
    top: 0;
    left: 180px;
    height: 100%;
    width: 33%;

    &--reset {
      fill: #BFC7D8;
      top: calc(50% - 12px / 2);
      right: 13px;
    }

    #q {
      position: absolute;
      top: 15px;
      width: 300px;
      height: 40px;
      border: 0;
      box-shadow: none;

      &:focus {
        outline: none;
        box-shadow: none;
      }
    }
  }
}

/* FILTERS
// ------------------------- */
.aisdemo-filters {

  .aisdemo-filter {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid $aisdemo-color-gray-light;
  }

  .aisdemo-filter-title {
    font-size: 1em;
    font-weight: normal;
    padding-top: 9px;
    padding-left: 30px;
  }

  .date, #guests select {
    font-size: .8em;
    padding: 8px 10px;
    border: 1px solid $aisdemo-color-gray-light;
  }

  #guests select {
    width: 100%;
    padding-right: 20px;
    border-radius: 0;
    background: transparent;
    appearance: none;

    &:focus {
      outline: none;
    }
  }

  .guests-caret {

    &::before {
      line-height: 1;
      position: absolute;
      top: 0;
      right: 20px;
      width: 2em;
      padding-top: .8em;
      content: '\25bc';
      text-align: center;
      pointer-events: none;
      color: #82888A;
    }
  }

  #room_types {

    .ais-refinement-list--count {
      display: none;
    }

    .ais-refinement-list--item {
      display: inline-block;
      cursor: pointer;

      label {
        font-size: .8em;
        font-weight: normal;
        box-sizing: border-box;
        width: 100%;
        padding: 9px 10px 7px;
        background: $aisdemo-color-gray-lighter;
      }
    }

    .ais-refinement-list--checkbox {
      position: relative;
      bottom: 3px;
      float: right;
      width: 1.25em;
      height: 1.25em;
      margin-left: 20px;
      vertical-align: top;
      border: 1px solid $aisdemo-color-gray-light;
      background: #FFFFFF;
      appearance: none;

      &:focus {
        outline: none;
      }
    }

    .ais-refinement-list--item__active {

      .ais-refinement-list--checkbox {

        &::before {
          font-size: .85em;
          position: absolute;
          width: 1.25em;
          content: '\2713';
          text-align: center;
          color: #FF5A5F;
        }
      }
    }
  }

  #price {

    .ais-range-slider--target {
      margin: 30px 9px 18px;
    }

    .ais-range-slider--handle {
      border-color: $aisdemo-primary-color;
    }

    .rheostat-progress {
      background-color: $aisdemo-primary-color !important;
    }

    .ais-range-slider--tooltip {

      &:last-child {
        right: 0;
      }
    }

    .ais-range-slider--connect {
      background-color: $aisdemo-primary-color;
    }
  }
}


/* STATS
// ------------------------- */
#stats {
  font-size: 1em;
  font-weight: normal;
  position: absolute;
  bottom: 0;
  padding: 5px 15px;
}


/* MAP
// ------------------------- */
#map {
  height: 400px;
}


/* RESULTS
// ------------------------- */
#results {
  padding: 40px 20px;
  background: #EDEFED;
}

#hits {

  .hit {

    .pictures-wrapper {
      position: relative;

      .picture {
        width: 100%;
      }

      .profile {
        position: absolute;
        bottom: -16px;
        right: 12px;
        width: 60px;
        border: 4px solid rgba(255, 255, 255, .3);
        border-radius: 30px;
      }
    }

    .infos {
      height: 90px;
      padding: 16px 20px;

      h4 {
        font-size: 1em;
        font-weight: normal;
      }

      p {
        font-size: .8em;
        color: $aisdemo-text-lighter-color;
      }

      em {
        font-style: normal;
        color: $aisdemo-primary-color;
      }

    }
  }
}


/* PAGINATION
// ------------------------- */
#pagination {
  text-align: center;

  .ais-pagination--item {
    display: inline-block;
    margin: 1px;
  }

  .ais-pagination--link {
    color: $aisdemo-primary-color;
    border-radius: 4px;
    background: transparent;
  }

  .pagination > .active > a {
    color: $aisdemo-color-white;
    border-color: $aisdemo-primary-color;
    background: $aisdemo-primary-color;
  }

  .pagination > li > a, .pagination > li > span {

    &:focus, &:hover {
      color: $aisdemo-color-white;
      border-color: $aisdemo-primary-color;
      background: $aisdemo-primary-color;
    }
  }
}


.thank-you {
  text-align: center;
  font-size: .8em;

  a {
    color: #FF585B;
  }
}
